<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
        	<el-row :gutter="20 " class="demo-autocomplete">
        		<el-col :span="7">
                    <template>
                        <div>
                        <span class="demonstration">操作角色:</span>
                    <el-select v-model="roleid" placeholder="请选择角色">
                        <el-option
                          v-for="r in roles"
                          :key="r.id"
                          :label="r.rolename"
                          :value="r.id">
                        </el-option>
                      </el-select>
                      </div>
                    </template>
        		</el-col>
        	</el-row>
            <el-row style="text-align: center;">
                <el-button type="primary" @click="updatepremission">修改角色权限</el-button>
            </el-row>
        	<br />
            <br />
            <br/>
            <el-table
                @select-all="selectAll"
                :data="functions"
                style="width: 100%;margin-bottom: 20px;"
                row-key="id"
                border
                ref="premission"
                 @selection-change="handleSelectionChange"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                 <el-table-column
                      type="selection"
                      width="55">
                    </el-table-column>
               <el-table-column
                 prop="functionname"
                 align="center"
                 label="功能名称">
               </el-table-column>
               <el-table-column
                 prop="funcurl"
                 align="center"
                 label="功能URL">
               </el-table-column>
                <el-table-column
                  label="创建时间"
                  align="center"
                  width="180">
                  <template slot-scope="scope">{{scope.row.creationtime|moment('YYYY-MM-DD HH:mm:ss')}}</template>
                </el-table-column>
                <el-table-column
                  prop="isstart"
                  label="是否启用"
                  align="center"
                  width="180">
                </el-table-column>
              </el-table>
            </div>
    </div>
</template>

<script>
    import {queryFunctions,queryRole,queryRolePremission,updateRolePremission} from '@/api/getData'
	import headTop from '../components/headTop'
    import {baseUrl} from '@/config/env'
    import {mapState} from 'vuex'
    export default {
        data() {
          return {
              roleid:'',
              functions:[],
              roles:[],
              fids:[],
              premission:[],
              flag:true
          }
        },
    	components: {
    		headTop,
    	},
        computed: {

        	...mapState(['adminInfo']),

        },
        created(){
            this.queryRoles();
        },methods:{
            check(value){

            },
           async getData(){
               const res = await queryFunctions();
                this.functions=res;
                this.fids=await queryRolePremission(this.roleid);
                var length=0;
                for(var i=0;i<this.functions.length;i++){
                    if(this.fids.includes(this.functions[i].id)){
                        this.$refs.premission.toggleRowSelection(this.functions[i],true);
                    }
                    for(var j=0;j<this.functions[i].children.length;j++){
                        if(this.fids.includes(this.functions[i].children[j].id)){
                           this.$refs.premission.toggleRowSelection(this.functions[i].children[j],true);
                        }
                        length++;
                    }
                    length++;
                }
                if(length==this.fids.length){
                    this.flag=false;
                }else{
                    this.flag=true;
                }
            },
            async queryRoles(){
                const res = await queryRole();
                this.roles=res;
            }, handleSelectionChange(val) {
                    this.premission = val;
            },
           async updatepremission(){
                var fids=[];
                for(var i=0;i<this.premission.length;i++){
                    fids.push(this.premission[i].id);
                }
                const res = await updateRolePremission({roleid:this.roleid,fids:fids.join(',')});
                if (res.status == 1) {

                	this.$message({

                        type: 'success',

                        message: res.message

                    });
                }else{

                	this.$message({

                        type: 'error',

                        message: res.message

                    });

                }
            },
            selectAll(){
                if(this.flag){
                    for(var i=0;i<this.functions.length;i++){
                            this.$refs.premission.toggleRowSelection(this.functions[i],true);
                        for(var j=0;j<this.functions[i].children.length;j++){
                               this.$refs.premission.toggleRowSelection(this.functions[i].children[j],true);
                        }
                    }
                }
                else{
                    for(var i=0;i<this.functions.length;i++){
                            this.$refs.premission.toggleRowSelection(this.functions[i],false);
                        for(var j=0;j<this.functions[i].children.length;j++){
                               this.$refs.premission.toggleRowSelection(this.functions[i].children[j],false);
                        }
                    }
                }
                this.flag=!this.flag;
            }
        },
        watch:{
            roleid:function(val){
                this.getData()
            }
        }
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .table_container {
    	padding: 20px;
    }
</style>
